<template>
  <div class="table-pagination">
    <button class="button btn-prev" :class="{ 'disabled': currentPage === 1 }" @click="handlePrevPage">
      <i class="el-icon-arrow-left"></i>
    </button>
    <span class="page">
      <span class="color-main">{{ currentPage }}</span>/{{ total }}
    </span>
    <button class="button btn-next" :class="{ 'disabled': currentPage === total }" @click="handleNextPage">
      <i class="el-icon-arrow-right"></i>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    total: Number,
  },
  methods: {
    handlePrevPage() {
      this.$emit('current-change', this.currentPage - 1)
    },
    handleNextPage() {
      this.$emit('current-change', this.currentPage + 1)
    }
  },
}
</script>

<style scoped lang='scss'>
.button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: #333333;
}
.btn-prev {
  margin-right: 2px;
}
.btn-next {
  margin-left: 2px;
}
.disabled {
  pointer-events: none;
  color: #999999;
}
</style>
